<script setup lang="ts">
import { GlobalRegistry, createDesigner } from '@season-designable/core';
import {
  ComponentTreeWidget,
  CompositePanel,
  CompositePanelItem,
  Designer,
  DesignerToolsWidget,
  OutlineTreeWidget,
  ResourceWidget,
  SettingsPanel,
  StudioPanel,
  ToolbarPanel,
  ViewPanel,
  ViewToolsWidget,
  ViewportPanel,
  Workspace,
  WorkspacePanel,
  HistoryWidget,
} from '@season-designable/vue';
import SchemaEditor from './SchemaEditor.vue';
import SettingsForm from './components/SettingsForm/index.vue';
import {
  Card,
  Field,
  Input,
  InputNumber,
  Password,
  Rate,
  Root,
  TextArea,
  FormGrid,
  FormGridColumn,
} from './components/Sources';
import { isString } from 'lodash-es';

GlobalRegistry.setDesignerLocales({
  'zh-CN': {
    sources: {
      Inputs: '输入控件',
      Displays: '展示控件',
      Feedbacks: '反馈控件',
    },
  },
  'en-US': {
    sources: {
      Inputs: 'Inputs',
      Displays: 'Displays',
      Feedbacks: 'Feedbacks',
    },
  },
});

const engine = createDesigner();

const language = ref(GlobalRegistry.getDesignerLanguage());
const switchLanguage = (value: string | number | boolean) => {
  if (isString(value)) GlobalRegistry.setDesignerLanguage(value);
};

const components = {
  Root,
  Field,
  Card,
  Input,
  TextArea,
  Password,
  InputNumber,
  Rate,
  FormGrid,
  FormGridColumn,
};

GlobalRegistry.registerDesignerBehaviors(components);
</script>

<template>
  <Designer :engine="engine">
    <!-- <Workbench> -->
    <StudioPanel>
      <template #logo>
        <div class="logo-container">
          <a>
            <img
              class="logo"
              src="https://element-plus.gitee.io/images/element-plus-logo.svg"
            />
          </a>
        </div>
      </template>

      <template #actions>
        <el-radio-group v-model="language" @change="switchLanguage">
          <el-radio-button label="zh-cn">简体中文</el-radio-button>
          <el-radio-button label="en-us">English</el-radio-button>
        </el-radio-group>

        <el-button style="margin-left: 12px">保存</el-button>
        <el-button>发布</el-button>
      </template>

      <CompositePanel>
        <CompositePanelItem title="panels.Component">
          <template #icon>
            <i-mdi-home />
            <!-- <Icon icon="mdi:home" /> -->
          </template>
          <ResourceWidget
            title="sources.Inputs"
            :sources="[Input, TextArea, Password, InputNumber, Rate]"
          />
          <ResourceWidget
            title="sources.Displays"
            :sources="[Card, FormGrid]"
          />
          <!-- <ResourceWidget title="sources.Feedbacks" :sources="[]" /> -->
        </CompositePanelItem>
        <CompositePanelItem title="panels.OutlinedTree">
          <template #icon>
            <i-mdi-format-list-text />
            <!-- <Icon icon="mdi:format-list-text" /> -->
          </template>
          <OutlineTreeWidget />
        </CompositePanelItem>
        <CompositePanelItem title="panels.History">
          <template #icon>
            <i-mdi-archive-clock />
            <!-- <Icon icon="mdi:archive-clock" /> -->
          </template>
          <HistoryWidget />
        </CompositePanelItem>
      </CompositePanel>
      <Workspace id="form">
        <WorkspacePanel>
          <ToolbarPanel>
            <DesignerToolsWidget />
            <ViewToolsWidget />
          </ToolbarPanel>
          <ViewportPanel :style="{ height: '100%' }" flexable>
            <ViewPanel type="DESIGNABLE">
              <ComponentTreeWidget :components="components"
            /></ViewPanel>
            <ViewPanel type="JSONTREE">
              <SchemaEditor></SchemaEditor>
            </ViewPanel>
          </ViewportPanel>
        </WorkspacePanel>
      </Workspace>

      <SettingsPanel title="panels.PropertySettings">
        <SettingsForm></SettingsForm>
      </SettingsPanel>
    </StudioPanel>
    <!-- </Workbench> -->
  </Designer>
</template>

<style lang="scss" scoped>
.logo-container {
  display: flex;
  align-items: center;
  height: var(--header-height);

  a {
    display: flex;
    align-items: center;
    font-size: 14px;
    .logo {
      margin: 4px;
      height: 26px;
      width: auto;
    }
  }
}
</style>
./components/Sources
